<template>
	<view class="content">
		<view class="scheme_item" v-for="(item,index) in schemeList" :key="index" @click="schemeItemAction(index)">
			<view class="scheme_info">
				<image class="scheme_img" src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_scheme_img1.png"></image>
				<view class="scheme_text_info">
					<text class="scheme_text_title">{{item.schemeName}}</text>
					<text class="scheme_text_time BebasNeueBold"
						style="white-space:pre-wrap;font-size:30rpx;">{{item.schemeCount}}</text>
					<text class="scheme_text_time " style="white-space:pre-wrap;">{{item.schemeTime}}</text>
				</view>
				<text :class="item.schemeState=='进行中'?'status':'status2'">{{item.schemeState}}</text>
			</view>
		</view>
		<view class="emptyView" v-if="schemeList.length==0">
			<image src="https://portal.xumengte.com/static/emptymessage.png" mode="aspectFit" class="empty-image">
			</image>
			<text class="font-md font-weight-bold text-gray-normal">暂无记录...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				schemeList: [{
					schemeName: '2024科学减脂方案(1)',
					schemeCount: '3次/周',
					schemeTime: '2024-09-01 ~ 2025-12-01',
					schemeState: '进行中',
				}, {
					schemeName: '2024科学减脂方案(2)',
					schemeCount: '3次/周',
					schemeTime: '2024-09-01 ~ 2025-12-01',
					schemeState: '已结束',
				}]
			}
		},
		onLoad() {

		},
		methods: {
			schemeItemAction(index) {
				uni.navigateTo({
					url: '/pages/train/schemedetail'
				})
			}
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		width: 100%;
	}

	page,
	view {
		display: flex;
	}

	.view_scroll {
		align-items: center;
		flex: 1;
		justify-content: center;
		position: relative;
	}

	.scroll {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	.scheme_text_title {
		color: rgba(0, 0, 0, 0.871);
		font-size: 32rpx;
		font-weight: 700;
		max-width: 380rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.scheme_text_time {
		color: rgba(0, 0, 0, 0.6);
		font-size: 24rpx;
		margin-top: 4rpx;
	}

	.scheme_text_info {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		margin-left: 24rpx;
	}

	.scheme_img {
		color: #fff;
		height: 96rpx;
		width: 96rpx;
	}

	.scheme_info {
		flex: 1;
		padding: 34rpx;
	}

	.scheme_img_background,
	.scheme_info {
		align-items: center;
		display: flex;
	}

	.scheme_img_background {
		background: #000;
		background-color: #ff8851;
		border-radius: 20rpx;
		height: 96rpx;
		justify-content: center;
		width: 96rpx;
	}

	.status {
		background-color: rgba(255, 136, 81, 0.188);
		color: #ff7536;
	}

	.status,
	.status2 {
		align-items: center;
		border-radius: 26rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		font-size: 24rpx;
		height: 52rpx;
		justify-content: center;
		line-height: 1;
		width: 124rpx;
	}

	.status2 {
		background-color: rgba(168, 171, 187, 0.188);
		color: #7f8087;
	}

	.scheme_item {
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		height: 196rpx;
		margin-bottom: 24rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		position: relative;
	}

	.scheme_item:active {
		background-color: #eee;
	}

	.title_nav {
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 110rpx;
	}

	.icon_back {
		height: 50rpx;
		width: 50rpx;
	}

	.view_back {
		align-items: center;
		display: flex;
		height: 110rpx;
		justify-content: center;
		width: 110rpx;
	}

	.text_title {
		font-size: 40rpx;
		font-weight: 500;
	}

	.view_back:active {
		background-color: #eee;
	}

	.content {
		background-color: #f2f3f5;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	.status_bar {
		height: 110rpx;
		width: 100%;
	}

	.BebasNeueBold {
		font-family: BebasNeueBold;
	}
</style>